<html>
<body>
	<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
  <div>
    <span>
      <input type="text" id="input1" placeholder="会受恶意注入影响"  />
      <button type="button" id="button1" > 提交</button>
    </span>
    <span>
      <input type="text" id="input2" placeholder="过滤HTML字符串"  />
      <button type="button" id="button2" > 提交</button>
    </span>
  </div>
	<div id="root">
	</div>
	<script>
//
tage = (arrray, ...vars) => {
  console.log('模板标签')
  console.log('字符串数组',arrray)
  console.log('变量数组',vars)
}
let a = 'aaa'
let b = 'bbb'
tage`hello ${a+b} world ${a} ! ${1}`

$('#button1').on('click',()=>{
  let value = $('#input1').val();
  let str = `用户若是注入js代码${value},页面便会收到影响`
  $('#root').append(str+'<br/>')
})

$('#button2').on('click',()=>{
  let value = $('#input2').val();
  let str = SaferHTML`将模板拆分后再重组并处理后,客户注入的代码${value}就会变成普通的字符串`
  $('#root').append(str+'</br>')
})

function SaferHTML(arr,...values) {
  var str = arr[0];
  for (var i = 0; i < values.length ; i++) {
    var arg = String(values[i]);

    str += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    str += arr[i+1];
  }
  return str;
}


String.raw = function (strArr, ...values) {
  console.log(strArr.raw)
  var output = "";
  for (var i = 0; i < values.length; i++) {
    output += strArr.raw[i] + values[i];
  }

  output += strArr.raw[i]
  return output;
}
test = function (strArr, ...values) {
  console.log(strArr)
}
String.raw`Hi\\n${2+3}!`
let sss = test`Hi\n${2+3}!`

//test(arr)
//test`string`

//国际化

let lang_en = `Welcome to ${'stateName'}, you are visitor number ${'num'}` 
let lang_ch = `欢迎访问${'stateName'}，您是第 ${'num'}位访问者`  

var data = {stateName: 'xxx网站',num: '99' }

let translate = (strArr,...values) =>{
    console.log(strArr)
}

	</script>
	</body>
</html>
